<script setup>
import { ElCard, ElButton, ElSpace, ElMessage, ElTooltip } from "element-plus";
import { ref, computed, watchEffect } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  fixedInvestReportDetails,
  fixedInvestProjectList,
  fixedInvestExport,
  editFixedProjectApi,
} from "@/api/investPaper/";
import useTable, { usePageList } from "@/hooks/useTable";
import { fixedInvestColumns } from "../columns";

import { useExport } from "@/hooks/useDaily";
import DetailEdit from "./DetailEdit.vue";
import YearSummary from "./YearSummary.vue";
import AdjustRecord from "./AdjustRecord";
import MonthRecord from "./MonthRecord";
import { useRouter, useRoute } from "vue-router";
import CustomTable from "@/components/CustomTable";
import Maintenance from "../components/Maintenance.vue";
import { statusOfMaintennance } from '@/common/dict/dictCollect'
import { valueTransLabelObj } from '@/hooks/useCommon'

const projectStatusObj = valueTransLabelObj(statusOfMaintennance)

const route = useRoute();
const projectName = ref("");
const showDetailEdit = ref(false);
const showYearSummary = ref(false);
const showAdjustRecord = ref(false);
const showMonthRecord = ref(false);
const currentMonth = ref(1);
const maintenanceRef = ref(null)

const activeRow = ref({});

const {
  dataSource,
  pagination,
  searchData,
  loading,
  pageChange,
  getDataSource,
  search,
} = usePageList(fixedInvestProjectList);

const tableData = computed(() => {
  return dataSource.value.map(item => ({ ...item, ...item.yearAmount }))
})

pagination.value.size = 100;
const onlyEdit = ref(false);
const editTitle = ref("");

const onEdit = (row, flag, title) => {
  showDetailEdit.value = true;
  activeRow.value = row;
  onlyEdit.value = flag;
  editTitle.value = title;
};

// 打开项目维护
const onMaintenance = (row = {}) => {
  maintenanceRef.value?.open(row)
}

// 确认项目维护
const upholdProject = async(data = {}) => {
  try {
    const { code } = await editFixedProjectApi(data)
    if(code == '200') {
      ElMessage({
        message: '维护成功！',
        type: 'success',
      })
      getDataSource()
    }
  } catch (error) {
    
  }
}

const onYearChange = (row) => {
  activeRow.value = row;
  showYearSummary.value = true;
};
const handleBlur = () => {
  searchData.value = { projectName: projectName.value };
  search();
};
const handleAjustRecord = () => {
  showAdjustRecord.value = true;
};
const onMonthRecord = (row) => {
  activeRow.value = row;
  showMonthRecord.value = true;
};
const { onExport } = useExport({
  exportFn: fixedInvestExport,
  fileName: "固投跟踪表导出",
  params: {
    param: {
      ...searchData.value,
    },
    pageNum: pagination.value.current,
    pageSize: pagination.value.size,
  },
});
const cardBodyHeight = computed(() => {
  const cardHeight = document.querySelector(".el-card")?.clientHeight || 0;
  const cardHeaderHeight =
    document.querySelector(".el-card__header")?.clientHeight || 0;
  return cardHeight - cardHeaderHeight;
})

</script>

<template>
  <el-card shadow="hover" class="invest-card">
    <template #header>
      <div class="header_card">
        <div class="title_tag">
          每月月初截止7号填报上月支付明细；例如：需要在2月7日之前，填报完成1月
          支付明细
        </div>
        <el-space>
          <el-input
            v-model="projectName"
            style="width: 240px"
            placeholder="项目名称搜索"
            :suffix-icon="Search"
            @input="handleBlur"
          />

          <el-button type="primary" @click="handleAjustRecord"
            >计划调整记录</el-button
          >
          <el-button type="primary" @click="onExport">导出</el-button>
        </el-space>
      </div>
    </template>

    <CustomTable
      size="large"
      class="custom_table"
      height="60vh"
      :selection="false"
      v-loading="loading"
      :indexWidth="50"
      :tableData="tableData"
      :page="pagination"
      @page-change="pageChange"
      :tableOption.sync="fixedInvestColumns"
      operationfixed="right"
      :operationWidth="250"
      operation
      indexFixed
      border
    >
      <template v-for="month in 12" #[`m${month}`]="scope" :key="month">
        <el-button
          class="month_btn"
          v-if="scope.row.monthlyAmount[`m${month}`]"
          @click="onMonthRecord({ ...scope.row, month })"
          >{{ scope.row.monthlyAmount[`m${month}`] }}</el-button
        >
        <span v-else>-</span>
      </template>

      <template #haveInvoice="scope">
        <span>{{ scope.row.haveInvoice === 0 ? '否' : '是' }}</span>
      </template>
      <template #inWarehouse="scope">
        <span>{{ scope.row.inWarehouse === 0 ? '不符合' : '符合' }}</span>
      </template>
      <template #isDoing="scope">
        <span>{{ scope.row.isDoing === 0 ? '否' : '是' }}</span>
      </template>
      <template #projectStatus="scope">
        <span>{{ projectStatusObj[scope.row.projectStatus] }}</span>
      </template>

      <template #projectContent="scope">
        <el-tooltip effect="light" placement="top-start">
          <template #content>
            <div style="max-width: 300px">{{ scope.row.projectContent }}</div>
          </template>
          <div
            style="
              text-overflow: ellipsis;
              white-space: wrap;
              overflow: hidden;
              max-height: 300px;
            "
          >
            {{ scope.row.projectContent }}
          </div></el-tooltip
        >
      </template>
      <template #coordinateRemark="scope">
        <el-tooltip effect="light" placement="top-start">
          <template #content>
            <div style="max-width: 300px">{{ scope.row.coordinateRemark }}</div>
          </template>
          <div
            style="
              text-overflow: ellipsis;
              white-space: wrap;
              overflow: hidden;
              max-height: 300px;
            "
          >
            {{ scope.row.coordinateRemark }}
          </div></el-tooltip
        >
      </template>
      <template #menu="scope">
        <el-button
          v-permission="'472450387257027272'"
          class="button_view menu_btn"
          size="small"
          @click="onEdit(scope.row, false, '明细填报')"
          >明细填报</el-button
        >
        <el-button
          v-permission="'472450387257027272'"
          class="button_edit menu_btn"
          size="small"
          @click="onEdit(scope.row, true, '明细编辑')"
          >明细修改</el-button
        >
        <el-button
          v-permission="'517285547694231552'"
          class="button_edit menu_btn"
          size="small"
          @click="onMaintenance(scope.row)"
          >项目维护</el-button
        >
        <el-button
          class="button_funtion menu_btn"
          v-permission="'473850320838070272'"
          size="small"
          @click="onYearChange(scope.row)"
          >年度计划调整</el-button
        >
      </template>
    </CustomTable>
  </el-card>
  <DetailEdit
    :onlyEdit="onlyEdit"
    :init="activeRow"
    @finish="getDataSource"
    :title="editTitle"
    v-model:visible="showDetailEdit"
  />
  <YearSummary
    v-model:visible="showYearSummary"
    :init="activeRow"
    @finish="getDataSource"
  />
  <AdjustRecord v-model:visible="showAdjustRecord" @finish="getDataSource" />
  <MonthRecord
    :init="activeRow"
    v-model:visible="showMonthRecord"
    @finish="getDataSource"
  />
  <Maintenance ref="maintenanceRef" @finish="upholdProject" />
</template>

<style lang="scss" scoped>
@import "@/styles/investPaper.scss";
</style>
